<template>
  <div id="login">
    <div>
      <!-- 公司logo -->
      <div class="login-img">
        <img src="./logo.png" alt="">
      </div>
      <div class="main">
        <div class="loginContent">
            <p>经营智慧荟萃 酒店信息分享</p>
            <div class="userName">
                <span class="iconfont">&#xe678;</span>
                <input type="text" name="username" placeholder="请输入用户名">
            </div>
            <div class="userPwd">
                <span class="iconfont">&#xe65a;</span>
                <input type="text" name="username" placeholder="请输入用户名">
            </div>
            <div class="rememberPwd">
                <div style="float:left">
                    <Checkbox v-if="single">记住密码</Checkbox>
                </div>
                <div class="forgetPwd" style="float:left;margin-left:180px;">
                    忘记密码？
                </div>
                <div style="height:0px; clear: both; overflow:hidden;"></div>
            </div>
            <div class="loginDiv" style="height: 40px;background:#f44336;text-align:center;line-height:40px;color:#fff;margin-top:20px" @click="homePage()">
                 <span>立即登陆</span>
            </div>
            <div class="loginDiv" style="height: 40px;background:#f7f7f7;text-align:center;line-height:40px;color:#666;margin-top:30px;border:1px solid #dddee1;">
                <span>企业用户注册</span>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import homePage from "@/pages/HomePage/homePage.vue";
export default {
  name: "login",
  data() {
    return {
      single: "false"
    };
  },
  methods: {
    homePage() {
       this.$Message.success('登陆成功');
      setTimeout(() => {
        this.$router.push({
          path: "/test1"
        });
      }, 1500);
    },
    login_tip() {}
  }
};
</script>
<style>
#login {
  height: 100vh;
  background: url(loginBg.jpg) center center;
}
#login > div {
  height: 100vh;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.6);
}
/* logo部分 */
.login-img {
  padding: 4vh 0px 0px 4vh;
}
/* 登陆主题部分 */
#login .main {
  width: 400px;
  margin: 0 auto;
  margin-top: 12vh;
  border-radius: 5px;
  background: #fff;
  height: 380px;
}
#login > div .main .loginContent {
  height: 100%;
}
#login > div .main .loginContent > div {
  width: 330px;
  margin: 0 auto;
  margin-bottom: 10px;
}
/* 表格标语 */
#login > div .main .loginContent p {
  text-align: center;
  padding: 20px;
  font-family: "微软雅黑";
  font-size: 22px;
}
/* 用户信息填写 */
#login > div .main .loginContent .userName input {
  width: 200px;
  height: 47px;
  /* background: red; */
}
.userName,
.userPwd {
  height: 50px;
  line-height: 50px;
  border: 1px solid #dedede;
  margin-bottom: 18px;
  display: flex;
}
.userPwd {
  margin-bottom: 30px !important;
}
.userName span,
.userPwd span {
  font-size: 20px;
  padding: 0px 10px;
}
.userName input,
.userPwd input {
  font-size: 14px;
  width: 100%;
  outline: none;
}
.loginDiv {
}
</style>
